@font-face {
    font-style: normal;
    font-family: '行楷';
    src: url('../fonts/演示夏行楷.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

body {
    font-family: '行楷', 华文行楷;
    font-size: 50px;
    background-color: pink;
}

body > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 50px auto;
    width: 180px;
    height: 250px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 -16px 1px #dadcdb, 0 -18px 2px #009743, 10px 10px 10px #333;
}

.one > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 50.4%;
    background-color: #3b6e52;
    border-radius: 50%;
    box-shadow: 1px 1px 7px inset;
}

.one > div > div {
    width: 50%;
    height: 50%;
    background-color: #c02c38;
    border-radius: 50%;
    box-shadow: 1px 1px 10px;
}

/*二筒*/

.ertong > div {
    position: relative;
    width: 50%;
    height: 36%;
}

/*三筒*/
.santong > div {
    width: 40%;
    height: 28.8%;
}

.santong > div:nth-child(1) {
    align-self: flex-start;
}

.santong > div:nth-child(3) {
    align-self: flex-end;
}

/*四筒*/
.sitong {
    flex-direction: row;
    flex-wrap: wrap;
}

.sitong > div {
    height: 25.2%;
    flex: 0 0 35%;
}

/*五筒*/
.wutong {
    flex-direction: row;
    flex-wrap: wrap;
}

.wutong > div {
    height: 25.2%;
    flex: 0 0 35%;
}

.wutong > div:nth-child(3) {
    display: flex;
    justify-content: center;
    flex: 1 1 100%;
}

.wutong > div:nth-child(3) > div {
    width: 35%;
    height: 100%;
}

/*六筒*/
.liutong {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.liutong > div:nth-child(1) {
    align-self: flex-start;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 30%;
}

.liutong > div:nth-child(1) div {
    width: 35%;
    height: 84%;
}

.liutong > div:nth-child(2) {
    align-self: flex-end;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 60%;
}

.liutong > div:nth-child(2) div {
    width: 35%;
    height: 42%;
}

/*七筒*/
.qitong {
    flex-direction: column;
    align-items: center;
}

.qitong > div:nth-child(1) {
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
}

.qitong > div:nth-child(1) div {
    width: 30%;
    height: 54%;
}

.qitong > div:nth-child(1) div:nth-child(1) {
    align-self: flex-start;
}

.qitong > div:nth-child(1) div:nth-child(3) {
    align-self: flex-end;
}

.qitong > div:nth-child(2) {
    align-self: flex-end;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
}
.qitong > div:nth-child(2) div{
    width: 30%;
    height: 36%;
    margin: 0 3%;
}
/*八筒*/
.batong{
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
.batong>div{
    width: 30%;
    height: 21%;
}
/*九筒*/
.jiutong{
    flex-direction: row;
    flex-wrap: wrap;
}
.jiutong>div{
    width: 30%;
    height: 21%;
}
/*發*/
.fa{
    font-size: 180px;
    color: #37af65;
    text-shadow: #333 5px 5px 1px;
}